<template>
    <div class="info-container">
        <div class="body">
            <h1 class="subtitle">|  用户信息</h1>
            <div class="userstatus">账号状态 ：待审核</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
                <el-form-item label="用户名称:" prop="name" >
                    <span style="font-size:12px; color:#666;">kongkong </span>
                </el-form-item>
                <br>
                <h1 class="subtitle">|  主体信息</h1>
                <el-form-item label="企业全称:" prop="firmName" class="Formmiddle">
                    <el-input v-model="ruleForm.firmName"></el-input>
                </el-form-item>
                <el-form-item label="营业执照号:" prop="execute">
                    <el-input v-model="ruleForm.execute"></el-input>
                </el-form-item>
                <el-form-item label="法人代表姓名:" prop="legalName">
                    <el-input v-model="ruleForm.legalName"></el-input>
                </el-form-item>
                <el-form-item label="法人代表身份证号:" prop="legalId">
                    <el-input v-model="ruleForm.legalId"></el-input>
                </el-form-item>
                <el-form-item label="企业住所:" prop="firmAdress">
                    <el-input v-model="ruleForm.firmAdress"></el-input>
                </el-form-item>
                <el-form-item label="联系人:" prop="contact">
                    <el-input v-model="ruleForm.contact"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱:" prop="mailBox">
                    <el-input v-model="ruleForm.mailBox"></el-input>
                </el-form-item>
                <el-form-item label="邮箱验证码:" prop="mailCheck">
                    <el-input v-model="ruleForm.mailCheck"></el-input>
                    <el-button v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode" size="small">获取验证码</el-button>
                    <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒后重新发送验证码</span>
                </el-form-item>
                <el-form-item label="开户银行:" prop="bank">
                    <el-input v-model="ruleForm.bank"></el-input>
                </el-form-item> 
                <el-form-item label="开户银行账号:" prop="bankAccount">
                    <el-input v-model="ruleForm.bankAccount"></el-input>
                </el-form-item>
                <el-form-item label="营业执照扫描件:" prop="licenseImg">
                    <div v-show="!ruleForm.permissionImg" style="fontSize:13px;color:#666;">暂无</div>
                    <img :src="ruleForm.permissionImg" v-show="ruleForm.permissionImg" class="evidence-img" style="width:90px;display:block;">
                    <input type="file" @change="uploadImg($event, 'permission')">
                </el-form-item>

                <el-form-item label="开户银行许可证:" prop="licenseImg">   
                    <div v-show="!ruleForm.licenseImg" style="fontSize:13px;color:#666;">暂无</div>
                    <img :src="ruleForm.licenseImg" v-show="ruleForm.licenseImg" class="evidence-img" style="width:90px;display:block;">
                    <input type="file" class="upload-btn-hidden" @change="uploadImg($event, 'license')">
                </el-form-item>
                <el-form-item label="其他资质证件:" prop="othersImg">  
                    <div v-show="!ruleForm.othersImg" style="fontSize:13px;color:#666;">暂无</div> 
                    <img :src="ruleForm.othersImg" v-show="ruleForm.othersImg" class="evidence-img" style="width:90px;display:block;">
                    <input type="file" class="upload-btn-hidden" @change="uploadImg($event, 'others')">
                </el-form-item>
                <p v-show="ruleForm.imageChack" style="fontSize:13px;textAlign: center;color:red;">{{ruleForm.imageChack}}为必填项</p>
                <el-form-item class="buttongroup">
                    <el-button @click="submitForm('ruleForm')" size="small" class='buildButton'>点击修改</el-button>
                    <el-button  size="small" class='buildButton'>保存修改</el-button>
                    <el-button  size="small" class='buildButton'>重新提交</el-button>
                </el-form-item>
              </el-form>
        </div>
    </div>			
</template>

<script>
import axios from 'axios'
import qs from 'qs'
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          firmName:'广州市kongkong贸易有限公司',
          execute:'8441321328',
          legalName:'陈新',
          legalId:'44510389456975567',
          firmAdress:'广州市海珠区',
          contact:'陈新',
          phoneNumber:'13076778978',
          mailBox:'920112604@qq.com',
          mailCheck:'',
          trueCheck:'',
          bank:'建设银行',
          bankAccount:'4456461321646212195',
          imageFiles: {},
          licenseImg: '',
          permissionImg: '',
          othersImg: '',
          imageChack:''
        },
        rules: {
          pass:[
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个注册类型', trigger: 'change' }
          ],
          role: [
            { type: 'array',required: true, message: '请至少选择一个注册角色', trigger: 'change' }
          ],
          firmName: [
            { required: true, message: '请填写企业全称', trigger: 'blur' }
          ],
          execute:[
            { required: true, message: '请填写营业执照号', trigger: 'blur' }
          ],
          legalName:[
            { required: true, message: '请填写法人代表姓名', trigger: 'blur' }
          ],
          legalId:[
            { required: true, message: '请填写法人代表身份证号', trigger: 'blur' }
          ],
          firmAdress:[
            { required: true, message: '请填写企业住所', trigger: 'blur' }
          ],
          contact:[
            { required: true, message: '请填写联系人', trigger: 'blur' }
          ],
          phoneNumber:[
            { required: true, message: '请填写联系电话', trigger: 'blur' }
          ],
          mailBox:[
            { type: 'email',required: true, message: '请填写正确的邮箱格式', trigger: 'blur' }
          ],
          mailCheck:[
            { required: true, message: '请填写邮箱验证码', trigger: 'blur' }
          ],
          bank:[
            { required: true, message: '请填写开户银行', trigger: 'blur' }
          ],
          bankAccount:[
            { required: true, message: '请填写开户账号', trigger: 'blur' }
          ]
        },
        sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0, /*倒计时 计数器*/
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.ruleForm.licenseImg&&this.ruleForm.permissionImg){
                alert('修改成功!');
            }else{
                this.ruleForm.imageChack='营业执照扫描件 和 开户银行许可证';
            }
          } else {
            return false;
          }
        });
      },
      getAuthCode:function () {
            console.log(this.ruleForm.mailBox);
            axios.post('http://192.168.1.198:8080/partner/mail', qs.stringify({
                mailAddress: this.ruleForm.mailBox
              }))
              .then(function (response) {
              console.log(response);
              // this.ruleForm.trueCheck = response;
              })
              .catch(function (error) {
              console.log(error);
            });

            this.sendAuthCode = false;
            this.auth_time = 60;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
      },
      uploadImg(event, type) {
        this.ruleForm[type + 'Img'] = '';
        const file = event.target.files[0];
        if (file) {
            this.ruleForm.imageFiles[type] = event.target.files[0];
            console.log(event.target.files[0]);
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                this.ruleForm[type + 'Img'] = reader.result;
                console.log(reader.result);
            };
        }
      }
    }
  }
</script>

<style lang="scss">
    .info-container{
        .body{
            position: relative;
            width: 500px;
            margin-left: 250px;

            .subtitle{
                color:  #666;
                font-size: 13px;
                font-weight: 600;
                margin-top: 15px;
            }

            .userstatus{
                font-size: 13px;
                position: absolute;
                top: 0;
                right: 0;
                color: #666

            }

            .demo-ruleForm{
                margin-top: 30px;

              .Formmiddle{
                margin-top: 20px;
              }

              .el-checkbox__label{
                font-size: 10px;
              }

              .el-form-item__label{
                font-size: 13px;
                width: 130px!important;
              }
            //   
             
             .el-form-item__content{
                margin-left: 130px!important;
              }

              .el-input{
              width: 60%;
              }

              .buildButton{
                width: 30%;
              }
              .auth_text{
                font-size: 9px;
              }

              .el-button{
                background-color:#f1895c;
                color: white;
                border: none;
              }

              .el-form-item__error{
                padding-left: 10px;
              }
              .buttongroup{
                  .el-form-item__content{
                      margin-left: 0!important;
                      margin-top: 20px;
                  }
              }
            }
        }
    }
</style>
